<ion-navbar *navbar hideBackButton>

  <ion-title>
    Segments
  </ion-title>

</ion-navbar>

<ion-toolbar [attr.primary]="isAndroid ? '' : null" >
  <ion-segment [(ngModel)]="pet" [attr.light]="isAndroid ? '' : null">
    <ion-segment-button value="puppies">
      Puppies
    </ion-segment-button>
    <ion-segment-button value="kittens">
      Kittens
    </ion-segment-button>
    <ion-segment-button value="ducklings">
      Ducklings
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>


<ion-content>

<!--   <div padding>

  </div>  -->

  <div [ngSwitch]="pet">
    <ion-list *ngSwitchWhen="'puppies'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-puppy-1.jpg">
        </ion-thumbnail>
        <h2>Ruby</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-puppy-2.jpg">
        </ion-thumbnail>
        <h2>Oscar</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-puppy-4.jpg">
        </ion-thumbnail>
        <h2>Zoey</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-puppy-3.jpg">
        </ion-thumbnail>
        <h2>Otto</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchWhen="'kittens'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-kitten-1.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-kitten-3.jpg">
        </ion-thumbnail>
        <h2>Milo</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-kitten-4.jpg">
        </ion-thumbnail>
        <h2>Bandit</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-kitten-2.jpg">
        </ion-thumbnail>
        <h2>Nala</h2>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchWhen="'ducklings'">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-duckling-1.jpg">
        </ion-thumbnail>
        <h2>Daffy</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-duckling-2.jpg">
        </ion-thumbnail>
        <h2>Huey</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-duckling-3.jpg">
        </ion-thumbnail>
        <h2>Dewey</h2>
      </ion-item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="img/thumbnail-duckling-4.jpg">
        </ion-thumbnail>
        <h2>Louie</h2>
      </ion-item>
    </ion-list>
  </div>


</ion-content>
